<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>节点集合</title>
</head>
<body>
    <div id="houdunren">houdurnen.com</div>
    <div name="hdcms">hdcms.com</div>
    <div id="xj">向军大叔</div>

    <div id="app">
        <a href="">houdunren.com</a>
        <a href="">hdcms</a>
    </div>

    <script>
        //length
        //nodeList和HTMLCollection都包含length属性,都记录了节点元素的数量
        // const nodes = document.getElementsByTagName('div');
        // for(let i = 0 ;  i < nodes.length ; i++){
        //     console.log(nodes[i]);
        // }

        //转换数组
        //有时候需要使用数组方法来操作节点集合,这个时候就需要将节点集合转化为数组类型

        //(1)使用call调用原型方法
        // let elements = document.getElementsByTagName("div");
        // console.log(elements);
        // let arr = Array.prototype.slice.call(elements,0);
        // console.log(arr)
        // arr.map((item) => {
        //     item.style.color = 'red';
        // });

        //(2)使用Array.form进行转化
        // let elements = document.getElementsByTagName('div');
        // console.log(elements);
        // console.log(Array.from(elements));
        // Array.from(elements).forEach(elem => {
        //     elem.style.color = 'red';
        // });

        //(3)使用点语法转化节点为数组
        // let elements = document.getElementsByTagName('DIV');
        // console.log(elements);
        // console.log([...elements]);
        // [...elements].map((item) => {
        //     item.addEventListener('click',function(){
        //         this.style.textTransform = 'uppercase';
        //     })
        // });

        //总结 将集合转化为数组的三种形式
        //(1)Array.prototype.slince.call(elements,0)
        //(2)Array.form(elements)
        //(3)[...elements]



        //item
        //NodeList与HTMLCollection都提供了item()方法根据索引获取元素
        // const nodes = document.getElementsByTagName('div');
        // console.dir(nodes.item(1));


        //使用数组索引获取更加方便
        // const nodes = document.getElementsByTagName('div');
        // console.dir(nodes[1]);

        //通过namedItem可以按照name或者id属性来获取元素
        //namedItem
        // const nodes = document.getElementsByTagName('div');
        // console.dir(nodes.namedItem('houdunren'));

        //可以通过数组或者属性的方式获取
        // const nodes = document.getElementsByTagName('div');
        // console.dir(nodes['hdcms']);
        // console.dir(nodes.hdcms);


        //数字索引使用item方法,字符串索引的时候使用namedItem方法
        // const nodes = document.getElementsByTagName('div');
        // console.log(nodes[0]);
        // console.log(nodes['xj']);
        // console.log(nodes.namedItem('xj'));



        //常用元素
        //系统针对特定的标签提供了快速选则的方式
        //下面展示的是获取所有的a标签
        // const nodes = document.links;
        // console.log(nodes);

        



    </script>
</body>
</html>